<template>
  <div class="performance-process">
    <div class="header">
      <div class="header-content">
        <router-link class="back-btn" to="/main/process">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </router-link>
        <h2 class="page-title">绩效考核管理流程</h2>
      </div>
    </div>

    <div class="content">
      <!-- 流程步骤 -->
      <el-steps :active="currentStep" finish-status="success" align-center>
        <el-step
          v-for="(step, index) in processSteps"
          :key="index"
          :title="step.title"
          :description="step.description"
          @click.native="goToStep(index)"
        >
          <template slot="icon">
            <i :class="step.icon"></i>
          </template>
        </el-step>
      </el-steps>

      <!-- 步骤内容 -->
      <el-card class="step-content" shadow="hover">
        <template v-if="currentStepInfo">
          <div class="step-header">
            <h3>
              <i :class="currentStepInfo.icon"></i>
              {{ currentStepInfo.title }}
            </h3>
            <p class="description">{{ currentStepInfo.description }}</p>
          </div>

          <div class="step-body">
            <el-form
              ref="stepForm"
              :model="formData"
              :rules="rules"
              label-width="120px"
            >
              <!-- 目标制定 -->
              <template v-if="currentStep === 0">
                <el-form-item label="考核周期" prop="period">
                  <el-date-picker
                    v-model="formData.period"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>

                <el-form-item label="考核对象" prop="target">
                  <el-select
                    v-model="formData.target"
                    placeholder="请选择考核对象"
                  >
                    <el-option
                      v-for="item in employees"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="考核目标" prop="goals">
                  <el-table :data="formData.goals" border>
                    <el-table-column
                      prop="content"
                      label="目标内容"
                      min-width="260"
                    >
                      <template slot-scope="scope">
                        <el-input
                          v-model="scope.row.content"
                          type="textarea"
                          :rows="2"
                        ></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="weight" label="权重" width="230">
                      <template slot-scope="scope">
                        <el-input-number
                          v-model="scope.row.weight"
                          :min="0"
                          :max="100"
                        ></el-input-number>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="100">
                      <template slot-scope="scope">
                        <el-button type="text" @click="removeGoal(scope.$index)"
                          >删除</el-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                  <div style="margin-top: 10px">
                    <el-button type="primary" size="small" @click="addGoal"
                      >添加目标</el-button
                    >
                  </div>
                </el-form-item>
              </template>

              <!-- 自评 -->
              <template v-if="currentStep === 1">
                <el-form-item label="完成情况" prop="selfEvaluation">
                  <el-input
                    type="textarea"
                    v-model="formData.selfEvaluation"
                    :rows="4"
                    placeholder="请详细描述目标完成情况"
                  >
                  </el-input>
                </el-form-item>

                <el-form-item label="自评分数" prop="selfScore">
                  <el-rate
                    v-model="formData.selfScore"
                    :max="5"
                    :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                  >
                  </el-rate>
                </el-form-item>

                <el-form-item label="补充说明" prop="selfRemark">
                  <el-input
                    type="textarea"
                    v-model="formData.selfRemark"
                    :rows="4"
                    placeholder="请输入补充说明"
                  >
                  </el-input>
                </el-form-item>
              </template>

              <!-- 上级评价 -->
              <template v-if="currentStep === 2">
                <el-form-item label="评价意见" prop="supervisorComment">
                  <el-input
                    type="textarea"
                    v-model="formData.supervisorComment"
                    :rows="4"
                    placeholder="请输入评价意见"
                  >
                  </el-input>
                </el-form-item>

                <el-form-item label="考核得分" prop="finalScore">
                  <el-input-number
                    v-model="formData.finalScore"
                    :min="0"
                    :max="100"
                    :step="1"
                  >
                  </el-input-number>
                </el-form-item>

                <el-form-item label="改进建议" prop="suggestions">
                  <el-input
                    type="textarea"
                    v-model="formData.suggestions"
                    :rows="4"
                    placeholder="请输入改进建议"
                  >
                  </el-input>
                </el-form-item>
              </template>

              <!-- 结果确认 -->
              <template v-if="currentStep === 3">
                <el-form-item label="考核结果" prop="result">
                  <el-radio-group v-model="formData.result">
                    <el-radio label="excellent">优秀</el-radio>
                    <el-radio label="good">良好</el-radio>
                    <el-radio label="qualified">合格</el-radio>
                    <el-radio label="unqualified">不合格</el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="确认意见" prop="confirmComment">
                  <el-input
                    type="textarea"
                    v-model="formData.confirmComment"
                    :rows="4"
                    placeholder="请输入确认意见"
                  >
                  </el-input>
                </el-form-item>
              </template>
            </el-form>
          </div>

          <div class="step-footer">
            <el-button v-if="currentStep > 0" @click="prevStep"
              >上一步</el-button
            >
            <el-button type="primary" @click="nextStep" :loading="submitting">
              {{ currentStep === processSteps.length - 1 ? "提交" : "下一步" }}
            </el-button>
          </div>
        </template>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "PerformanceProcess",
  data() {
    return {
      currentStep: 0,
      submitting: false,
      processSteps: [
        {
          title: "目标制定",
          description: "设定考核目标和权重",
          icon: "el-icon-aim",
        },
        {
          title: "自我评价",
          description: "员工自评",
          icon: "el-icon-edit-outline",
        },
        {
          title: "上级评价",
          description: "主管评分",
          icon: "el-icon-user",
        },
        {
          title: "结果确认",
          description: "确认考核结果",
          icon: "el-icon-check",
        },
      ],
      formData: {
        period: [],
        target: "",
        goals: [],
        selfEvaluation: "",
        selfScore: 0,
        selfRemark: "",
        supervisorComment: "",
        finalScore: 0,
        suggestions: "",
        result: "",
        confirmComment: "",
      },
      employees: [
        { id: 1, name: "张三" },
        { id: 2, name: "李四" },
        { id: 3, name: "王五" },
      ],
      rules: {
        // 表单验证规则
      },
    };
  },
  computed: {
    currentStepInfo() {
      return this.processSteps[this.currentStep];
    },
  },
  created() {
    // 添加 postMessage 事件监听
    window.addEventListener("message", this.handlePostMessage);
  },
  beforeDestroy() {
    // 组件销毁前移除事件监听，避免内存泄漏
    window.removeEventListener("message", this.handlePostMessage);
  },
  methods: {
    async fetchData(id) {
      try {
        const response = await getLeaveApplicationDetail(id);
        if (response.data) {
          const data = response.data;
          // 处理日期和时间
          if (data.plannedStartTime) {
            const date = new Date(data.plannedStartTime);
            this.formData.plannedStartDate = date.toISOString().split("T")[0];
            this.formData.plannedStartTime = date
              .toTimeString()
              .substring(0, 5);
          }
          if (data.plannedEndTime) {
            const date = new Date(data.plannedEndTime);
            this.formData.plannedEndDate = date.toISOString().split("T")[0];
            this.formData.plannedEndTime = date.toTimeString().substring(0, 5);
          }
          if (data.actualStartTime) {
            const date = new Date(data.actualStartTime);
            this.formData.actualStartDate = date.toISOString().split("T")[0];
            this.formData.actualStartTime = date.toTimeString().substring(0, 5);
          }
          if (data.actualEndTime) {
            const date = new Date(data.actualEndTime);
            this.formData.actualEndDate = date.toISOString().split("T")[0];
            this.formData.actualEndTime = date.toTimeString().substring(0, 5);
          }
          // 设置其他字段
          this.formData = {
            ...this.formData,
            ...data,
            // 保持分离的日期和时间字段
            plannedStartDate: this.formData.plannedStartDate,
            plannedStartTime: this.formData.plannedStartTime,
            plannedEndDate: this.formData.plannedEndDate,
            plannedEndTime: this.formData.plannedEndTime,
            actualStartDate: this.formData.actualStartDate,
            actualStartTime: this.formData.actualStartTime,
            actualEndDate: this.formData.actualEndDate,
            actualEndTime: this.formData.actualEndTime,
          };
        }
      } catch (error) {
        this.$message.error("获取数据失败：" + error.message);
      }
    },
    goToStep(index) {
      if (index <= this.currentStep) {
        this.currentStep = index;
      }
    },
    prevStep() {
      if (this.currentStep > 0) {
        this.currentStep--;
      }
    },
    async nextStep() {
      try {
        await this.$refs.stepForm.validate();
        if (this.currentStep < this.processSteps.length - 1) {
          this.currentStep++;
        } else {
          await this.submitProcess();
        }
      } catch (error) {
        // 表单验证失败
      }
    },
    async submitProcess() {
      this.submitting = true;
      try {
        // TODO: 提交数据到后端
        await new Promise((resolve) => setTimeout(resolve, 1000));
        this.$message.success("流程提交成功");
        this.$router.push("/main/process");
      } catch (error) {
        this.$message.error("提交失败");
      } finally {
        this.submitting = false;
      }
    },
    addGoal() {
      this.formData.goals.push({
        content: "",
        weight: 0,
      });
    },
    removeGoal(index) {
      this.formData.goals.splice(index, 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.performance-process {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 40px);

  .header {
    margin-bottom: 30px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

    .header-content {
      position: relative;
      text-align: center;

      .back-btn {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        text-decoration: none;
        color: #606266;
        display: flex;
        align-items: center;

        &:hover {
          color: #409eff;
        }

        i {
          margin-right: 5px;
        }
      }

      .page-title {
        margin: 0;
        font-size: 24px;
        color: #303133;
      }
    }
  }

  .content {
    .el-steps {
      margin-bottom: 30px;
      padding: 20px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    }

    .step-content {
      .step-header {
        margin-bottom: 30px;
        text-align: center;

        h3 {
          margin: 0 0 10px;
          font-size: 20px;
          color: #303133;

          i {
            margin-right: 8px;
            color: #409eff;
          }
        }

        .description {
          margin: 0;
          color: #606266;
        }
      }

      .step-body {
        max-width: 800px;
        margin: 0 auto;
      }

      .step-footer {
        margin-top: 30px;
        text-align: center;

        .el-button {
          min-width: 120px;
          margin: 0 10px;
        }
      }
    }
  }
}

:deep(.el-step__icon) {
  cursor: pointer;
}
</style> 